<!--
 * @Description: 
 * @Version: 1.0
 * @Author: Will
 * @Date: 2021-12-06 14:15:37
 * @LastEditors: MarsLay 331412466@qq.com
 * @LastEditTime: 2024-02-21 11:44:10
 * @FilePath: \cloud-space\pages\assets\discern.vue
 * Copyright (C) 2021 Will. All rights reserved.
-->
<template>
  <l-page canback title="搜索">
    <view class="list">
      <z-paging ref="paging" v-model="list" @query="queryList">
        <view slot="top">
          <view class="search">
            <search @search="search" :param="param" :screen="screen"></search>
          </view>
          <view class="tab">
            <view @click="change(v.id)" class="option" :class="{ 'active': v.id == screen.type }" v-for="v in tab.list"
              :key="v.id">
              {{ v.title }}
            </view>
          </view>
        </view>
        <view class="inner-list">
          <view class="single-content" v-for="v in list" :key="v.id">
            <view v-if="v.type == 'trip'" class="trip">
              <view class="content">
                <view class="title">{{ v.title }}</view>
                <view class="tip">{{ v.content }}</view>
                <view class="param">{{ v.days }}天 共{{ v.person }}人</view>
              </view>
              <view class="user">
                <avatar shape="circle" :size="32" :src="v.headimg"></avatar>
                <view class="username">{{ v.username }}</view>
              </view>
            </view>
            <view v-else class="person">
              <view class="user">
                <avatar shape="circle" :size="38" :src="v.headimg"></avatar>
                <view class="username">{{ v.username }}</view>
              </view>
              <view class="follow" :class="{ 'isFollowed': v.isFollowed }">
                <image v-if="!v.isFollowed" class="add-follow" mode="aspectFill"
                  src="../../static/img/icon/add-icon-w.png"></image>
                <view class="txt">{{ v.isFollowed ? '已关注' : '关注' }}</view>
              </view>
            </view>
          </view>
        </view>
      </z-paging>
    </view>
  </l-page>
</template>

<script>
import search from "@/components/search/search";
import avatar from "@/components/avatar/avatar";
export default {
  name: "search",
  components: { search, avatar },
  data() {
    return {
      param: {
        match: "key",
        confirm: true,
        placeholder: "请输入要查询的内容",
      },
      screen: {
        key: "",
        type: 0,
      },
      tab: {
        list: [{ id: 0, title: "全部" },
        { id: 1, title: "行程" },
        { id: 2, title: "创建人" },]
      },
      list: [{ id: 0, type: 'trip', title: "冬日瑰丽：哈尔滨冰雪奇幻之旅", content: "冰雪童话，冬日乐园", days: 7, person: 50, headimg: '', username: '玛卡巴卡' },
      { id: 1, type: 'trip', title: "冬日瑰丽：哈尔滨冰雪奇幻之旅", content: "冰雪童话，冬日乐园", days: 7, person: 50, headimg: '', username: '玛卡巴卡' },
      { id: 2, type: 'person', headimg: '', username: '玛卡巴卡', isFollowed: false },
      { id: 3, type: 'person', headimg: '', username: '玛卡巴卡', isFollowed: true }]
    };
  },
  computed: {},
  watch: {},
  onLoad(d) { },
  onShow() { },
  methods: {
    queryList(pageNo, pageSize) {
      this.screen.page = pageNo;
      this.screen.limit = pageSize;
      this.getList();
    },
    getList() {
      this.$refs.paging.complete(this.list);
    },
    search(v) {
      this.screen = v;
    },
    change(v) {
      this.screen.type = v;
    }
  },
  onUnload() { },
};
</script>
<style lang="less" scoped>
.list {
  padding: 20upx;

  .tab {
    .flex();
    width: 100%;
    height: 100upx;

    .option {
      .flex(row, center, flex-start);
      position: relative;
      flex: 1;
      padding-top: 30upx;
      height: 100%;
      font-size: 28upx;
      color: #999999;
      line-height: 36upx;

      &.active {
        color: #333333;
        font-weight: bold;

        &::before {
          content: "";
          position: absolute;
          bottom: 20upx;
          left: 50%;
          transform: translate(-50%, 0);
          width: 92upx;
          height: 8upx;
          background: #00B578;
          border-radius: 6upx;
        }
      }
    }
  }

  .single-content {
    padding: 0 20upx;
    width: 100%;
    height: fit-content;
    background: #FFFFFF;
    border-radius: 16upx;

    &:not(:last-child) {
      margin-bottom: 20upx;
    }

    >view {
      .flex();
      width: 100%;
      height: 100%;
    }

    .trip {
      padding: 20upx;

      .content {
        width: 80%;

        .title {
          font-size: 32upx;
          font-weight: bold;
          color: #333333;
          line-height: 36upx;
        }

        .tip {
          padding: 6upx 0;
          font-size: 24upx;
          color: #333333;
          line-height: 36upx;
        }

        .param {
          font-size: 20upx;
          color: #333333;
          line-height: 36upx;
        }
      }

      .user {
        .flex(column, center);

        .username {
          margin-top: 4upx;
          font-size: 24upx;
          color: #666666;
          line-height: 48upx;
        }
      }
    }

    .person {
      padding: 24upx 0 22upx;

      .user {
        .flex(row, flex-start);

        .username {
          margin-left: 10upx;
          font-size: 28upx;
          color: #666666;
          line-height: 48upx;
        }
      }

      .follow {
        .flex(row, center);
        width: 92upx;
        height: 48upx;
        border-radius: 8upx;
        background: #6ABE83;

        .txt {
          font-size: 24upx;
          color: #FFFFFF;
          line-height: 40upx;
        }
      }

      .isFollowed {
        background: #DDDDDD;
      }

      .add-follow {
        margin-right: 6upx;
        width: 20upx;
        height: 20upx;
      }
    }
  }
}
</style>